<!-- 命令监控 -->
<template>
  <div>
    <list
        ref="list"
        table-ref="commandlist"
        :table-tag="tableName"
        :init-headmune-flag="initHeadmuneFlag"
        class="center"
        style="width: 100%" 
        height="430px"
        :list-data="tableData"
        :has-select="false"
        :list-cols="colData"
        :init-cols-props.sync="initColsProps"
        :action-opts="actionOpts"
        @sort="handleSort"
        @init-table="initTable"
    >
      <template slot="stateSlot" slot-scope="{row}">
        {{ row.state | stateFilter(te) }}
      </template>
      <template slot="resultSlot" slot-scope="{row}">
        {{ row.result | resultFilter(te) }}
      </template>
    </list>
    <pagination :total="pageData.total" :page="pageData.page" :limit="pageData.limit" @pagination="doCommandList"></pagination>
  </div>
</template>

<script>
import DeviceMonitorApi from '@/api/device'
import List from '@/components/List'
import Pagination from '@/components/Pagination'
export default {
    name: "CommandMonitorInfo",
    components:{
      List,
      Pagination
    },
    data() {
        const headerContextMenus = {
          width: '120px',
          items: [
            'sortUp',
            'sortDown',
            'line',
            'cols'
          ]
        }
        return {
            editorForm: {},
            tableData: [],
            colData: [
              // { label: '创建时间', prop: "createdAt", headerContextMenus},
              { label: '发送时间', prop: "sendTime", headerContextMenus},
              { label: '创建用户', prop: "createdUsername", headerContextMenus},
              { label: '命令', prop: "commandName", headerContextMenus},
              { label: '状态', prop: "state",  headerContextMenus,slot: true},
              { label: '结果', prop: "result", headerContextMenus,slot: true},
              { label: '反馈时间', prop: "feedbackTime", headerContextMenus}
            ],
            initColsProps: ['createdUsername', 'commandName', 'state', 'result', 'sendTime', 'feedbackTime',],
            actionOpts: {
              show: false,
              align: 'center',
              width: '120px',
              hidEditBtn: true,
              hidDelBtn: true,
              name:'操作',
              slot: true
            },
            tableName:'commandMonitorTable',
            initHeadmuneFlag: false,

            pageData: {
              page: 1,
              total: 0,
              limit: 15
            },
            queryParam:{},
        }
    },
    props: {
      id: {
        default: 0
      }
    },
    filters: {
      resultFilter(val,te) {
        let msg = ''
        switch(val){
          case -1:
            msg = te('失败')
            break
          case 0:
            msg = te('等待执行')
            break
          case 1:
            msg = te('成功')
            break
        }
        return msg
      },
      stateFilter(val,te) {
        let msg = ''
        switch(val){
          case 0:
            msg = te('待发送')
            break
          case 1:
            msg = te('已发送')
            break
          case 2:
            msg = te('执行中')
            break
          case 3:
            msg = te('已完成')
            break
        }
        return msg
      },
    },
    mounted() {
      this.doCommandList()
    },
    created() {
      this.$eventBus.$on('doCommandMonitorInfoRefresh', this.doCommandList)
    },
    beforeDestroy() {
      this.$eventBus.$off('doCommandMonitorInfoRefresh')
    },
    methods: {
      initTable(config){
        this.initHeadmuneFlag = true //更改值  触发表头数据重绘
      },

      async doCommandList(current) {
        if(current) {
          this.pageData = {
            ...this.pageData,
            ...current
          }
        }
        var queryData = this.$data.queryParam
        queryData.current = this.pageData.page
        queryData.size = this.pageData.limit
        queryData.terminalId = this.id
        const res = await DeviceMonitorApi.loadCommandList(queryData)
        if(res) {
          this.tableData = res.records ? res.records : []
          this.pageData.total = Number(res.total? res.total: 0)
        }
      },

      // 排序
      handleSort(sortInfo) {
        if(sortInfo.type == 'ASC')
        {
          this.$refs.list.$refs.commandlist.sort(sortInfo.prop,'ascending');
        }else{
          this.$refs.list.$refs.commandlist.sort(sortInfo.prop,'descending');
        }
      },

      te(arg) {
        const hasKey = this.$te(arg)
        if (hasKey) {
          const result = this.$t(arg)
          return result
        }
        return arg
      },
    },
    watch: {
      id(val) {
        this.id = val
        this.doCommandList()
      }
    }
}
</script>